﻿<div class="container">
    <h1 class="col-12 mb-5">Tubular Grid</h1>
    <tb-grid server-url="/api/people/" require-authentication="false">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default panel-rounded">
                    <tb-grid-table class="table-bordered">
                        <tb-column-definitions>
                            <tb-column name="Id" sortable="true" sort-order="1"
                                       sort-direction="Ascending" column-type="numeric">
                                <tb-column-filter operator="Equals"></tb-column-filter>
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                            <tb-column name="Name" sortable="true">
                                <tb-column-filter operator="Contains"></tb-column-filter>
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                            <tb-column name="Age" sortable="true">
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                            <tb-column name="EmailAddress" sortable="true">
                                <tb-column-filter operator="Contains"></tb-column-filter>
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                        </tb-column-definitions>
                        <tb-row-set>
                            <tb-row-template ng-repeat="cells in $component.rows"
                                             row-model="cells" selectable="false">
                                <tb-cell-template>
                                    {{cells.Id}}
                                </tb-cell-template>
                                <tb-cell-template>
                                    {{cells.Name}}
                                </tb-cell-template>
                                <tb-cell-template>
                                    {{cells.Age}}
                                </tb-cell-template>
                                <tb-cell-template>
                                    {{cells.EmailAddress}}
                                </tb-cell-template>
                            </tb-row-template>
                        </tb-row-set>
                    </tb-grid-table>
                </div>
            </div>
        </div>
    </tb-grid>
    <br />
    If you want to know more about this Grid component, visit <a href="http://unosquare.github.io/tubular/#/">Tubular Git Pages</a>.
</div>
